<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="pamars">
      <el-form-item label="订单单号">
        <el-input v-model="pamars.order_code" placeholder="订单单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否退款">
        <el-select v-model="pamars.exists_refund" clearable placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算状态">
        <el-select v-model="pamars.settlement" clearable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="order_code" align="center" label="订单编号">
      </el-table-column>
      <el-table-column label="商品信息" align="center">
        <template slot-scope="scope">
          <div class="el-flex">
            <div>
              <el-popover placement="top-start" trigger="click">
                <a :href="scope.row.goods_img" target="_blank" title="查看最大化图片"><img :src="scope.row.goods_img" style="width: 300px;height: 300px" /></a>
                <img slot="reference" @click="$openImg(scope.row.goods_img)" :src="scope.row.goods_img" style="width: 50px;height: 50px; cursor:pointer" />
              </el-popover>
            </div>
            <div class="ml10" style="text-align:left">
              <div>{{ scope.row.goods_title }}</div>
              <div>{{ scope.row.sku_set_name }} <span class="ml10">{{ scope.row.number }}</span></div>
              <div>
                <span class="price">{{ scope.row.real_price }}</span>
                <del>{{ scope.row.sale_price }}</del>
              </div>
            </div>
          </div>

        </template>
      </el-table-column>
      <el-table-column align="center" prop="total_reduced" label="促销优惠" width="105"></el-table-column>
      <el-table-column prop="gains" align="center" label="原商家所得" width="150px">
      </el-table-column>
      <el-table-column align="center" label="用户贡献值" width="150px">
        <template slot-scope="scope">
          <a @click="searchDetails(scope.row)" class="able_gains">{{ scope.row.user_order_gains_sum }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="exists_refund" align="center" :formatter="existsRefund" label="是否退款" width="150px">
      </el-table-column>
      <el-table-column prop="refund_money" align="center" label="售后影响值" width="150px">
      </el-table-column>
      <!-- <el-table-column prop="shop_order_gains_donation" align="center" label="商家捐款" width="150px">
      </el-table-column> -->
      <el-table-column prop="able_gains" align="center" label="实际商家所得" width="150px">
      </el-table-column>
      <el-table-column prop="settlement" align="center" :formatter="statusFormatter" label="结算状态" width="150px">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]"
      :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    <el-dialog top="5vh" title="分佣明细" :visible.sync="dialogVisible" width="70%">
      <el-table :data="dialogList" ref="multipleTable" v-loading="tableLoading" row-key="Id" border style="width: 100%;">
        <el-table-column align="center" label="商品信息" min-width="105">
          <template slot-scope="scope">
            <div class="flex_y_center">
              <div>
                <img :src="scope.row.goods_img" class="table-img" />
              </div>
              <div class="table-info">
                <div class="title">{{ scope.row.goods_title }}</div>
                <div class="flex_bet">
                  <span>{{ scope.row.sku_set_name }} </span>
                  <span>x{{ scope.row.number }} </span>
                </div>
                <div class="price">{{ scope.row.sale_price }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="商品类型" width="105">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.proxy_goods ==true">代销商品</el-tag>
						<el-tag v-if="scope.row.proxy_goods ==false">非代销商品</el-tag>
					</template>
				</el-table-column> -->
        <el-table-column width="255" align="center" label="订单信息">
          <template slot-scope="scope">
            <div>订单状态：{{ scope.row.order_status }}</div>
            <div>应结算时间：{{ scope.row.should_settlement_time || "-" }}</div>
            <div>订单号码：{{ scope.row.order_code }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分佣人信息">
          <template slot-scope="scope">
            {{ scope.row.distribution_user_role_name }}
            <div>{{ scope.row.distribution_user_mobile }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分佣金额">
          <template slot-scope="scope">
            <div>分润初始值：{{ scope.row.gains }}</div>
            <div>售后影响值：{{ scope.row.refund_deduct }}</div>
            <div>分润最终值：{{ scope.row.able_gains }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分佣明细" width="300">
          <template slot-scope="scope">
            <div>分佣算法：{{ scope.row.env_remark }}</div>
            <!-- <div>分佣算法：{{divideArr[scope.row.distribution_computer].label}}</div> -->
            <!-- {{scope.row.distribution_user_role_name}} -->
            <!-- <div>层级名称：{{tier[scope.row.distribution_type].label}}</div> -->
            <!-- <div>{{scope.row.env_remark}}</div> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      dataForm: {},
      pamars: {
        page: 1,
        limit: 10,
        settlement: '',
        exists_refund: ''
      },
      totalPage: 0,
      dataList: [],
      options: [{
        value: false,
        label: '待结算'
      },
      {
        value: true,
        label: '已结算'
      }
      ],
      options2: [{
        value: false,
        label: '否'
      },
      {
        value: true,
        label: '是'
      }
      ],
      dataListLoading: false,
      addOrUpdateVisible: false,
      dialogVisible: false,
      dialogList: [],
      tableLoading: false,
      divideArr: [
        { value: 0, label: "一二级分佣" },
        { value: 1, label: "282分佣" },
        { value: 2, label: "6750礼包分佣" },
        { value: 3, label: "差价分佣" },
        { value: 4, label: "分享分佣" },
        { value: 5, label: "礼包之非创客礼包服务积分分佣" },
        { value: 6, label: "礼包之创客礼包服务积分分佣" },
        { value: 7, label: "普通商品上级用户实际身份服务积分分佣" },
        { value: 8, label: "创客直推爱心小屋下直推会员服务积分分佣" },
        { value: 9, label: "大区公司服务积分分佣" },
        { value: 10, label: "省级公司服务积分分佣" },
        { value: 11, label: "市级公司服务积分分佣" },
        { value: 12, label: "服务中心服务积分分佣" },
        { value: 13, label: "服务驿站服务积分分佣" },
        { value: 14, label: "爱心小屋服务积分分佣" }
      ],
      tier: [
        { value: 0, label: "自营商品1级分佣" },
        { value: 1, label: "自营商品2级分佣" },
        { value: 2, label: "代销商品小程序分佣282一级分佣" },
        { value: 3, label: "代销商品小程序分佣282,2级分佣" },
        { value: 4, label: "代销商品小程序分佣282最近的市代分佣" },
        { value: 5, label: "代销商品小程序分佣6750，直接上级平台合伙人分佣" },
        { value: 6, label: "代销商品小程序分佣6750，间接上级县级代理或市级代理分佣" },
        { value: 7, label: "代销商品小程序分佣6750，直接上级县级代理或市级代理分佣" },
        { value: 8, label: "代销商品小程序分佣6750，县级代理或市级代理10%分佣" },
        { value: 9, label: "代销商品小程序分佣6750，县级代理或市级代理7%分佣" },
        { value: 10, label: "代销商品小程序差价分佣，直接平台合伙人差价分佣" },
        { value: 11, label: "代销商品小程序差价分佣，间接上级县级代理或市级代理差价分佣" },
        { value: 12, label: "代销商品小程序差价分佣，直接上级县级代理或市级代理差价分佣" },
        { value: 13, label: "代销商品小程序差价分佣，县级代理或市级代理10%分佣" },
        { value: 14, label: "代销商品小程序差价分佣，县级代理或市级代理7%分佣" },
        { value: 15, label: "普通会员分享商品分佣" },
        { value: 16, label: "网红分享商品分佣" },
        { value: 17, label: "礼包之非创客礼包服务积分分佣" },
        { value: 18, label: "礼包之创客礼包服务积分分佣" },
        { value: 19, label: "普通商品上级用户实际身份服务积分分佣" },
        { value: 20, label: "创客直推爱心小屋下直推会员服务积分分佣" },
        { value: 21, label: "大区公司服务积分分佣" },
        { value: 22, label: "省级公司服务积分分佣" },
        { value: 23, label: "市级公司服务积分分佣" },
        { value: 24, label: "服务中心服务积分分佣" },
        { value: 25, label: "服务驿站服务积分分佣" },
        { value: 26, label: "爱心小屋服务积分分佣" },
      ]
    }
  },
  components: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      seviceApi.getGainsPagesList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.pamars.page = 1
      this.getList()
    },
    // 提现状态
    statusFormatter (row, column) {
      let status = row.settlement
      if (status == false) {
        return '待结算'
      } else {
        return '已结算'
      }
    },
    //
    existsRefund (row, column) {
      let status = row.exists_refund
      if (status == false) {
        return '否'
      } else {
        return '是'
      }
    },

    /*
    查看明细
    */
    searchDetails (row) {
      this.dialogVisible = true
      this.tableLoading = true
      seviceApi.getListByGainId(row.id).then(res => {
        if (res.data && res.data.code == 200) {
          this.dialogList = res.data.list
        }
        this.tableLoading = false
      })
    },
    changeType (e) {
      let result = ''
      if (e == 0) {
        result = '一二级分佣'
      } else if (e == 1) {
        result = '282分佣'
      } else if (e == 2) {
        result = '6750礼包分佣'
      } else if (e == 3) {
        result = '差价分佣'
      } else if (e == 4) {
        result = '分享分佣'
      }
      return result
    }
  }
}
</script>
<style lang="scss">
.el-flex {
  display: flex;
}

.ml10 {
  margin-left: 10px;
}

.able_gains {
  color: #17b3a3;
  cursor: pointer;
}

.flex_y_center {
  display: flex;
  align-items: center;
}

.flex_bet {
  display: flex;
  justify-content: space-between;
}

.table-info {
  margin-left: 10px;
  width: 65%;
  text-align: left;
}

.table-info .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.table-info .price {
  font-weight: bold;
  color: #333333;
}

.table-info .flex_bet {
  color: #999999;
}

.operator-btn {
  margin-bottom: 20px;
}

.w-50 {
  width: 45%;
}

.num {
  color: #333333;
  font-weight: bold;
}

.price {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}
</style>
